<template>
    <div id="index">
        <el-container>
            <el-header>
                <header-bar></header-bar>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <left-menu></left-menu>
                </el-aside>
                <el-main id="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import HeaderBar from "@/components/index/HeaderBar"
    import LeftMenu from "@/components/index/LeftMenu"
    export default {
        components: {
            HeaderBar,
            LeftMenu,
        },
        data() {
            return {
                height: ""
            }
        },
        mounted() {
            this.onSizeChange()
           this.getMainHeight()
        },
        methods: {
            getMainHeight() {
                let main = document.getElementsByClassName("el-main")[0]
                let client = document.documentElement.clientHeight
                main.style.height = `${client - 105}px`    
           },
           onSizeChange() {
               window.onresize = this.getMainHeight()
           }
        }
    }
</script>

<style lang="scss" scoped>
#index {
    width: 100%;
    box-sizing: border-box;
    .el-header {
        padding: 0;
        height: auto !important;
    }
    .el-main {
        overflow-y: scroll;
    //    height: 800px;
       box-sizing: border-box;
    }
}
</style>